<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>es6-proxy</title>
  </head>
  <body>
    <script>
      // 防抖
      // 常的使用场景是：用户输入，只需在输入完成后做一次输入校验即可。
      function debounce(callback, delay) {
        var t = null;
        return function () {
          clearTimeout(t);
          t = setTimeout(callback, delay);
        };
      }
      window.onscroll = debounce(function () {
        console.log("调用了一次");
      }, 500);

      // 节流;
      // 常使用场景：滚动条事件
      function throttle(fn, wait) {
        let timer = null;
        return function (...args) {
          if (!timer) {
            timer = setTimeout(() => {
              fn.apply(this, args);
              timer = null;
            }, wait);
          }
        };
      }
      window.onscroll = throttle(function () {
        console.log("调用了一次");
      }, 500);
    </script>
  </body>
</html>
